<template>
  <div>
    <div class="mui-input-row mui-search">
      <span class="mui-icon mui-icon-search" :class="{'on':searchIcon}"></span>
      <input type="search" class="mui-input-clear" :placeholder="placeholder" @focus="toggle()" @blur="toggle()" ref="search">
    </div>
    <h4>热门城市</h4>
    <div class="keyword">
      <div v-for="item in keywords" :key="item.id" class="keyword-item" @click="searchSuggest(item)" > {{ item.place }} </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchIcon: false,
      placeholder: '搜索',
      keywords: [
        {
          place: '北京',
          id: 1
        },{
          place: '上海',
          id: 2
        },{
          place: '广州',
          id: 3
        },{
          place: '大连',
          id: 4
        },
      ]
    };
  },
  methods: {
    toggle() {
      if(this.$refs.search.value) {
        this.searchIcon = false;
      }
      if(!this.searchIcon) {
        this.searchIcon = true;
        this.placeholder = '输入地点[空格]地点'
      } else {
        this.searchIcon = false;
        this.placeholder = '搜索'
      }
    },
    searchSuggest(item) {
      if (this.$refs.search.value === ''){
        this.$refs.search.value = item.place;
        
      } else {
        this.$refs.search.value = this.$refs.search.value + ' ' + item.place;
      }
      this.$refs.search.focus();
    }
  }
};
</script>

<style lang="scss" scoped>
h4 {
  position: relative;
  left: 3%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.mui-search {
  .mui-icon {
    left: 40%;
    top: 10%;
    position: absolute;
  }
  .mui-icon.on {
    display: none;
  }
}

.keyword {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  color: #555;
  .keyword-item {
    margin: 3% 2.5%;
    width: 20%;
    height: 30px;
    background-color: #eee;
    
    text-align: center;
    line-height: 30px;
    border: 1px solid #eee;
    border-radius: 5px;
    
  }
}
</style>
